<template>
	<view class="content">
		<view class="one">
			<view  class="left">头像</view>   <image :src="$host+src" mode="widthFix" id="image"></image>
		</view>
		<view class="line"></view>
		<view class="two">
			<view  class="left">会员号</view>    <input class="right" v-model="number"/>
		</view>
		<view class="line"></view>
		<view class="two">
			<view  class="left">昵称</view>   <input class="name" v-model="name"/>
		</view>
		<view class="line"></view>
		<view class="two">
			<view  class="left">手机号</view>    <input class="phone" v-model="phone"/>
		</view>
		<view class="line"></view>
		<view class="two">
			<view  class="left">邮箱地址</view>  <input class="email" v-model="email"/>
		</view>
		<view class="line"></view>
		<view class="btn" @click="setUser">保存</view>
	</view>
</template>

<script>
	export default{
			
		data(){
				
			return{
				$host:this.$host,
				src:"",
				name:"",
				email:"",
				phone:"",
				number:""
			}
		},
		onshow(){
			 this.$request("/getUserData","post",{}).then(res=>{
			 	  this.src=res.data[0].src
			 	  this.name=res.data[0].name
			 	  this.number=res.data[0].number
			 	   this.email=res.data[0].email
			 	   this.phone=res.data[0].phone
			 })
			  
		},
		onLoad(){
			 this.$request("/getUserData","post",{}).then(res=>{
			 	     this.src=res.data[0].src
			 		 this.name=res.data[0].name
					 this.number=res.data[0].number
					  this.email=res.data[0].email
					  this.phone=res.data[0].phone
					
			 })
			  
		},
		methods:{
			setUser(){
			
				 this.$request("/setUserData","post",{id:1,number:this.number,name:this.name,phone:this.phone,email:this.email}).then(res=>{
				      uni.showToast({
				      	title:"保存成功",
				           duration:1500,
				      	 position:top
				      }) 
				         setTimeout(function () {
				         	uni.hideToast();
				         }, 1500);
				 })
				 
			  	 
			}
		}
		
	}
</script>

<style>
	.btn{
		width: 342px;
		height: 40px;
		background-color: #fe9a69;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 136px;
		color: white;
	}
	.right{
		 margin-right: 8rpx;
		width: 130px;
	}
	.name{
		
		width: 50px;
	}
	.phone{
	
		width: 120px;
	}	
	.email{
		margin-right: 20rpx;
		width: 170px;
	}
	.line{
		width: 100%;
		height: 1rpx;
		background-color: #f4f4f4;
				margin-top: 10rpx;
			
	}
	.two{
		width: 100%;
		height: 46px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.one{
		width: 100%;
		height: 58px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#image{
	   width: 50px;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.left{
		margin-left: 20rpx;
	}
		
</style>